<style>
	.index {
		padding: 20rpx 30rpx;
		.title {
			font-size: 18px;
			border-bottom: 1px solid #f0f0f0;
			padding: 20rpx 0;
		}
		.form {
			.opt {
				display: flex;
				width: 100%;
				margin-top: 20rpx;
				.label {
					width: 120rpx;
					display: block;
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
				}
				.inp {
					height: 90rpx;
					width: calc(100% - 120rpx);
					padding: 0px  20rpx;
					box-sizing: border-box;
					border-bottom: 1px solid #cccc;
				}
			}
			
			.btn {
				padding: 0;
				margin: 0;
				width: 200rpx;
				font-size: 16px;
			}
		}
	
		.table {
			width: 100%;
			margin-top: 20rpx;
			.tr {
				width: 100%;
				display: flex;
				.td {
					width: 33.3333%;
					height: 80rpx;
					border: 1px solid #ccc;
					box-sizing: border-box;
					text-align: center;
					line-height: 80rpx;
					font-size: 32rpx;
					.btn {
						padding: 0;
						margin: 0;
						width: 100rpx;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 30rpx;
						display: inline-block;
						color: #f00;
						&:after {
							border: 0;
						}
					}
				}
				.td-2 {
					width: 320rpx;
				}
				.td-4 {
					width: 280rpx;
				}
				
			}
		}
	
		.msg {
			text-align: center;
			padding: 40rpx 0;
			color: #666;
		}
	}
	
	/* 弹出窗口 */
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.75);
		z-index: 10000;
		/* 居中 */
		display: flex;
		justify-content: center;
		align-items: center;
		.box {
			background-color: #fff;
			width: 90%;
			display: flex;
			padding: 50rpx 30rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
			.input {
				/* width: 200rpx; */
				flex-grow: 1;
				height: 80rpx;
				border: 1px solid #ccc;
				padding: 0 20rpx;
				box-sizing: border-box;
			}
			.butt {
				padding: 0;
				margin: 0;
				width: 100rpx;
				height: 80rpx;
				margin-left: 20rpx;
				font-size: 30rpx;
			}
		}
	}
</style>
<template>
	<view class="index">
		<view class="title">增删改查</view>
		
		<!-- 1.0 增 -->
		<view class="form">
			<view class="opt">
				<text class="label">账号</text>
				<!-- v-model="user.account"  数据双向绑定，为了获取输入框的值 -->
				<input v-model="user.account" type="text" placeholder="请输入账号" class="inp">
			</view>
			<view class="opt">
				<text class="label">昵称</text>
				<input v-model="user.nickName" type="text" placeholder="请输入昵称" class="inp">
			</view>
			<view class="opt">
				<text class="label">密码</text>
				<input v-model="user.password" type="password" placeholder="请输入密码" class="inp">
			</view>
			<view class="opt">
				<!-- 绑定事件  @click="addUser" -->
				<button class="btn" @click="addUser">添加用户</button>
			</view>
		</view>
	
		<!-- 2.0 查 -->
		<view class="table">
			<view class="tr">
				<view class="td td-2">账号</view>
				<view class="td">昵称</view>
				<view class="td td-4">操作</view>
			</view>
			
			<view class="tr" v-for="item in userArray">
				<view class="td td-2">{{item.account}}</view>
				<view class="td">{{item.nickName}}</view>
				<view class="td td-4">
					<!-- 3.0 删 -->
					<button @click="removeUser(item._id)"  class="btn" >删除</button>
					<!-- 显示弹出 -->
					<button @click="showMask(item._id, item.nickName)"  class="btn" >修改</button>
				</view>
			</view>
			
			<view class="msg" v-if="userArray.length == 0">
				<text>暂无用户列表~~</text>
			</view>
		</view>
		
		<!-- 弹窗用于编进用户昵称 -->
		<view class="mask" v-if="isShow">
			 <view class="box">
				 <input class="input" type="text" placeholder="请输入新昵称" v-model="nNickName">
				 <!-- 4.0 改 -->
				 <button class="butt" @click="updateUser"> 保存 </button>
				 <button class="butt" @click="hideMask"> 取消 </button>
			 </view>
		</view>
	</view>
</template>

<script setup >
	// 导入 ref 函数
	import { ref , reactive } from 'vue'
	
	// 导入用户集合（用户数据表对象）
	import { UsersCollection } from '../../common/db/index.js'
	
	// 记录表单信息
	const user = reactive({
		account: "", 
		password: "",
		nickName: ""
	})
	
	
	// 编写获取表单信息的方法
	const addUser = async ()=> {
		let {account , password, nickName } = user;
		// console.log({account , password, nickName })
		
		// 判断输入框是否为空
		if(account == "" || password == "" || nickName == ""){
			uni.showToast({
				title:"输入框不能为空",
				icon:"none"
			})
			
			return false;
		}
		
		// 加载提示
		uni.showLoading({
			title:"正在添加..."
		})
		
		
		// 点击“添加用户”按钮，是否把用户信息添加到云数据库上
		await UsersCollection.add({account , password, nickName })
		.then(
			content=> {
				// console.log("结果:",content)
				wx.showToast({
					title:"添加成功",
					icon: "success"
				})
				
				// 更新用户列表
				listUser();
			}
		)
		.catch(
			err=> {
				console.log("操作失败:",err)
			}
		)
		
		// 隐藏提示
		uni.hideLoading();
	}
	
	
	// 定义变量记录用户列表
	let userArray = ref([])
	
	// 编写获取用户列表的方法
	const listUser = async ()=>{
		await UsersCollection.get()
		.then(
			content=> {
				console.log("查看结果：",content)
				let result = content.result;
				if(result.errCode === 0) {
					// 获取用户列表
					let data = result.data;
					// 赋值
					userArray.value = data;
				}
			}
		)
		.catch(
			err=> {
				console.log("查询失败",err);
			}
		)
	}
	
	// 初始化，获取用户列表
	listUser();
	
	
	// 编写删除用户的方法
	const removeUserFn = async (id)=> {
		await UsersCollection.where({_id: id}).remove()
		.then(
			content=> {
				console.log("删除结果",content);
				let result = content.result;
				if(result.errCode === 0) {
					uni.showToast({
						title:"删除成功",
						icon:"none"
					})
				}
				//重新获取用户列表
				listUser();
			}
		)
		.catch(
			err=> {
				console.log("删除失败",err)
			}
		)
	}
	const removeUser =  (id)=> {
		//弹出对话框
		uni.showModal({
			title:"警告",
			content:"您确定要删除这个用户吗?",
			success(res) {
				// console.log(res);
				if(res.confirm === true) {
					// 执行删除用户的列表
					removeUserFn(id);
				}
			}
		})
	}
	
	
	// 定义布尔值 
	let isShow = ref(false);
	// 记录用户的 _id
	let uid = ref("");
	// 记录新昵称
	let nNickName = ref("")
	
	// 编写方法显示修改弹窗
	const showMask = (idValue, nameValue)=> {
		isShow.value = true;
		uid.value = idValue;
		nNickName.value = nameValue;
	}
	
	// 编写方法隐藏修改弹窗
	const hideMask = ()=> {
		isShow.value = false;
		uid.value = "";
	}
	
	// 编写更新用户昵称的方法
	const updateUser = async () => {
		// 判断 uid 和 nNickName 是否有值 
		if(uid.value == "" || nNickName.value == "") {
			uni.showToast({
				title:"缺少参数，不能修改昵称",
				icon:"none"
			})
			return false;
		}
		
		// 调用云数据库集合提供的修改方法
		await UsersCollection.where({_id: uid.value}).update({nickName: nNickName.value })
		.then(
			content=> {
				console.log("修改结果:",content);
				// 提示修改成功
				if(content.result.errCode === 0) {
					uni.showToast({
						title:"修改成功",
						icon: "none"
					})
				}
				// 重新获取用户列表
				listUser();
				
				// 修改之后，要重置输入框
				nNickName.value = "";
			}
		)
		.catch(
			err=> {
				console.log("修改失败",err);
			}
		)
		
		// 隐藏输入弹窗
		isShow.value = false;
		
	}
	
</script>